<template>
  <div>
    <el-card class="box-card">
      <div slot="header">
        <el-row>
          <el-col :span="16">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item style="cursor: pointer"><span @click="onHome">{{ $t('common.home') }}</span></el-breadcrumb-item>
              <el-breadcrumb-item style="cursor: pointer"><span @click="onSiteTemplate">{{ $t('common.websiteTemplate') }}</span></el-breadcrumb-item>
              <el-breadcrumb-item>{{ $t('common.createWebsite') }}</el-breadcrumb-item>
            </el-breadcrumb>
          </el-col>
          <el-col :span="8">
            <div style="text-align: right"><el-link href="/"><i class="el-icon-user-solid" /> {{ $t('common.merchantCenter') }}</el-link></div>
          </el-col>
        </el-row>

      </div>
      <div style="width: 400px;margin: 0px auto;padding-top: 50px">
        <!--        <PackageFunctionText title="网站" identifying="number_sites" @emitPackageFunction="emitPackageFunction"/>-->
        <el-card :body-style="{ padding: '0px', width: '400px',height: '500px' }">
          <div slot="header">
            <span>{{ $t('common.websiteTemplate') }}</span>
          </div>
          <el-image
            style="width: 100%; height: 400px"
            :src="siteInfo.avatar"
            fit="cover"
          />
          <div style="padding: 14px;">
            <div class="site-name">{{ siteInfo.name }}</div>
          </div>
        </el-card>
        <div style="padding-top: 20px">
          <el-button plain size="medium" :loading="loading" style="width: 100%" :disabled="submitDisabled" @click="onAdd">{{ $t('common.createNow') }}</el-button>
        </div>
      </div>
    </el-card>
    <div>
      <div class="bottom-information-auto">
        <div><el-link href="https://beian.miit.gov.cn" target="_blank">桂ICP备2023007053号-1</el-link></div>
        <div>{{ $t('common.guangxiQinzhouShaodiNetworkInformationTechnologyCoLtd') }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSiteInfo } from '@/web-api/site'
import { siteWebCreate } from '@/api/site'
// import PackageFunctionText from '@/components/PackageFunctionText'
export default {
  name: 'SiteWebAdd',
  components: { },
  data() {
    return {
      loading: false,
      siteInfo: {},
      submitDisabled: false
    }
  },
  created() {
    this.onSiteInfo()
  },
  methods: {
    onHome() {
      window.location.href = process.env.VUE_APP_WEB_URL
    },
    onSiteTemplate() {
      window.location.href = process.env.VUE_APP_WEB_URL + '/w-t'
    },
    onAdd() {
      var _this = this
      const loading = this.$loading({
        lock: true,
        text: this.$t('common.theWebsiteIscurrentlyBeingCreated'),
        spinner: 'el-icon-loading',
        customClass: 'loading-add-site'
      })
      this.loading = true
      setTimeout(() => {
        siteWebCreate({
          website_template_id: this.siteInfo.id
        }).then(res => {
          loading.close()
          _this.notifyMessage(res)
        }).catch(() => {
          loading.close()
          _this.loading = false
        })
      }, 2000)
    },
    notifyMessage(res) {
      var _this = this
      this.$notify({
        message: res.message,
        type: 'success',
        duration: 1 * 1000,
        onClose() {
          _this.$router.push('/site/list')
        }
      })
    },
    onSiteInfo() {
      const siteId = this.$route.query?.website_template_id
      if (!siteId) {
        window.location.href = process.env.VUE_APP_WEB_URL + '/w-t'
        return
      }
      getSiteInfo(siteId, {
        site_id: siteId
      }).then(res => {
        this.siteInfo = res
      })
    },
    emitPackageFunction(data) {
      if (data.extend.quantity <= data.identifying_count) {
        this.submitDisabled = true
      }
      if (data.current_package.is_expired) {
        this.submitDisabled = true
      }
    }
  }
}
</script>
<style>
  .site-name{
    font-size: 20px;
    white-space: pre-line;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .loading-add-site{
    font-size: 40px;
  }
  .bottom-information-auto{
    width: 60%;
    margin: 0px auto;
    min-width: 300px;
  }
  .bottom-information-auto div{
    padding-top: 20px;
  }
</style>

